<template>
    <view class="cart-container" v-if="cart.length!==0">
        <!--自定义组件 收货地址区域 -->
        <my-address></my-address>
        <!--自定义组件  收货地址区域 end-->
        <!-- 商品列表标题区域 -->
        <view class="cart-title">
            <!-- 左侧图标 -->
            <uni-icons type="shop" size="18"></uni-icons>
            <!-- 右侧文本 -->
            <text class="cart-title-text">购物车</text>
        </view>
        <!-- 商品列表标题区域 end-->
        <!-- 商品列表区域 -->
        <!-- 循环渲染每个商品 每循环一次 都生成一个滑动删除项 每个滑动删除项里包含一个商品信息 -->
        <uni-swipe-action>
            <view class="cart-list" v-for="(goods,i) in cart" :key="i">
                <uni-swipe-action-item>
                    <template v-slot:right>
                        <view class="deleteGoods" @click="deleteGoods(goods)"><text>删除</text></view>
                    </template>
                    <my-goodsitem :goods="goods" :showRadio="true" @radio-change="radioChange"
                        @goodsCountChange="countChange">
                    </my-goodsitem>
                </uni-swipe-action-item>
            </view>
        </uni-swipe-action>
        <!-- 商品列表区域 end-->
        <!--自定义组件  结算区域 -->
        <my-settle></my-settle>
        <!--自定义组件  结算区域 end-->
    </view>
    <!-- 空白购物车区域  购物车空白时显示 -->
    <view class="empty-cart" v-else>
        <image src="/static/cart_empty@2x.png" class="image"></image>
        <text class="text">空空如也~</text>
    </view>
</template>

<script>
    import badgeMixins from '@/mixins/badage-tabbar.js'
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        mixins: [badgeMixins],
        computed: {
            ...mapState('m_cart', ['cart'])
        },
        data() {
            return {

            };
        },
        methods: {
            ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoods']),
            // 监听到子组件的商品选中状态改变自定义事件 指定处理函数
            radioChange(e) {
                // console.log(e);
                // 调用vuex中改变商品状态的方法
                this.updateGoodsState(e)
            },
            // 监听到子组件商品数量改变事件 拿到传过来的商品id和改变后的值
            countChange(e) {
                // console.log(e);
                // 调用vuex中改变商品数量的方法
                this.updateGoodsCount(e)
            },
            // 滑动删除点击处理函数
            deleteGoods(goods) {
                this.removeGoods(goods)
            },
            // 点击商品去往详情页
            // gotoDetail(goods) {
            //     uni.navigateTo({
            //         url: '/subpck/goods_detail/goods_detail?goods_id=' + goods.goods_id
            //     })
            // }
        }

    }
</script>

<style lang="scss">
    .cart-container {
        padding-bottom: 50px;
    }

    .cart-title {
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 5px;
        border-bottom: 1px solid #efefef;

        .cart-title-text {
            margin-left: 10px;
        }
    }

    .deleteGoods {
        width: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background-color: #c00000;
    }

    .empty-cart {
        display: flex;
        flex-direction: column;

        align-items: center;
        padding-top: 150px;

        .image {
            width: 90px;
            height: 90px;
        }

        .text {
            font-size: 12px;
            text-align: center;
            margin-top: 10px;
        }
    }
</style>
